<template>

  <div class="employee_box">
    <el-form :inline="true" :model="query" class="demo-form-inline">

      <el-form-item label="人才编号">
        <el-input v-model="query.identifier" placeholder="人才编号"></el-input>
      </el-form-item>

      <el-form-item label="审批人">
        <el-input v-model="query.reviewerName" placeholder="审批人"></el-input>
      </el-form-item>

      <el-form-item label="人才姓名">
        <el-input v-model="query.name" placeholder="人才姓名"></el-input>
      </el-form-item>

      <el-form-item label="毕业学校">
        <el-input v-model="query.graduationSchool" placeholder="毕业学校"></el-input>
      </el-form-item>

      <el-form-item label="期望岗位">
        <el-input v-model="query.expectPosition" placeholder="期望岗位"></el-input>
      </el-form-item>

    </el-form>
    <el-table :data="page.records" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="人才手机号:"><span>{{ props.row.phone }}</span></el-form-item>
            <el-form-item label="人才年龄:"><span>{{ props.row.age }}</span></el-form-item>
            <el-form-item label="人才邮箱:"><span>{{ props.row.email }}</span></el-form-item>
            <el-form-item label="人才毕业学校:"><span>{{ props.row.graduationSchool }}</span></el-form-item>
            <el-form-item label="人才学历:"><span>{{ props.row.education }}</span></el-form-item>
            <el-form-item label="工作经历:"><span>{{ props.row.workCareer }}</span></el-form-item>
            <el-form-item label="工作时长:"><span>{{ props.row.workHours }}</span></el-form-item>
            <el-form-item label="期望时长:"><span>{{ props.row.expectSalary }}</span></el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="人才编号" prop="identifier"></el-table-column>
      <el-table-column label="人才名" prop="name"></el-table-column>
      <el-table-column label="审核人" prop="reviewerName"></el-table-column>
      <el-table-column label="期望岗位" prop="expectPosition"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="routerJourney(scope.row.id)" type="text" size="small">查看审核流程</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next"
                   :total="page.total"
                   :current-page="1" :page-size="page.size" @current-change="pagePerson"
                   style="margin-left: 45%;margin-top:50px">
    </el-pagination>

  </div>

</template>

<script>
import {pagePersonnel,searchPersonnel} from '@/api/core/job/personnel'

export default {
  data() {
    return {
      query:{},
      page:{},

    };
  },
  created() {
    this.pagePerson()
  },
  watch:{
    query: {
      handler(newValue,oldValue) {
        this.pagePerson(1,10,newValue)
      },
      deep:true
    }
  },
  methods:{
    async pagePerson(current,pageSize,data){
      let querys = {}
      if (data instanceof Object) {
        querys = data
      }
      if ( JSON.stringify(this.query)!=={} ){
        querys = this.query
      }
      const {data:res} = await pagePersonnel(current,10,querys)
      this.page = res.data.page;
    },
    routerJourney(id){
      this.$router.push({path:'/journey/'+id})
    }
  }

}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
  margin-left: 50px;
}
.employee_box{
  margin: 20px 50px;
}
</style>
